<template>
  <div class="container">
    <div class="content">
      <div><el-text type="primary">文本转语音</el-text></div>

      <div class="info">高级用户的字数限制为 5,000 UTF-8 字节。立即升级以享受此福利！ </div>
      <div><el-text type="primary" v>您的文本</el-text></div>
      <div><el-input type="textarea" v-model="textarea" rows="5" maxlength="500" show-word-limit /></div>
      <div class="info">语音质量取决于模型。为获得最佳效果，请使用高质量模型。严禁合成涉及政治、色情、赌博、毒品等违法违规内容。</div>
      <el-row>语音声音</el-row>
      <el-row class="user-list">

        <div class="user-item" v-for="(user, index) in users" :key="index">
          <img :src="router.query.head" :fit="scale - down" />
          <div class="user-info">
            <div><span class="user-name">{{router.query.roleName}}</span> </div>
            <el-row :gutter="20" class="el-row">
              <el-col :span="4">我的超级ai</el-col>
              <el-col :span="5">2个月前</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4"> <el-button type="primary" plain >播放试听</el-button> </el-col>
              <el-col :span="4"> <el-text type="info">300人使用</el-text> </el-col>
              <el-col :span="4"> <el-text type="info">300人使用</el-text> </el-col>
            </el-row>


          </div>


        </div>
      </el-row>
      <div>
        <el-row style="text-align: right;">
          <el-button @click="generate"  type="primary" plain>生成</el-button>
        </el-row>

      </div>
    </div>
    <div class="task_list">
      <el-row>任务列表</el-row>

      <el-row style="  border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);padding: 30px;"
    v-for="(task, index) in taskList" :key="index"
    >
        <el-row>
          <el-col :span="5">
            <div><img :src="avatar"></div>

          </el-col>
          <el-col :span="4" style="  display: flex; align-items: center">

            刘德华2{{ task.roleId }}

          </el-col>
          <el-col :span="14" style="text-align: right; ">
            <div @click="down(task.soundUrl)">下载</div>

          </el-col>
        </el-row>
        <PlayerCs :src="task.soundUrl"></PlayerCs>

      </el-row> 
 

    </div>

  </div>

</template>
<script setup>
import { ref } from 'vue'
import PlayerCs from '@/components/PlayerCs.vue';
 import { useRoute } from 'vue-router'
import request from '../request'
const router = useRoute();
 console.log(router.query.head);
const textarea = ref("");
const avatar = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
  
const taskList = ref([  ]  )
  let submitTask=null;
  let interval=  null;


   function down(src){
    ElMessage({
            message: "正在下载",
            center: true,
      
            type: 'success',
            })

     var strs = src.split("/");

        const filename = strs[4];
         const x = new XMLHttpRequest()
        x.open('GET', src, true)
        x.responseType = 'blob'
        x.onload = e => {
          // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
          const url = window.URL.createObjectURL(x.response)
          const a = document.createElement('a')
          a.href = url
          a.download = filename
          a.click()
        }
        x.send()
 
 }


 function generate (){
 let generateData={text:textarea.value,roleId:router.query.roleId}

request  .post('app/voice/submitVoice',generateData)
      .then(function (data){
           //成功
 
          console.log(data);
          submitTask=data.id;
           interval= setInterval(updateTaskList, 5000);
       })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });

 }



  request  .get('app/voice/dubRecordListByUser')
      .then(function (data){
           //成功
 
           data.forEach(element => {
            if(element.generateStatus==2){
              let task={
              roleId:element.roleId,
              soundUrl:process.env.VUE_APP_URL+element.soundUrl
            }
 
            taskList.value.push(task);
            }
            console.log(taskList);

           });


 
       })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
    function  updateTaskList (){
 

      if(submitTask!=null){
        console.log("updateTaskList"+submitTask);
        request  .get('app/voice/dubRecordById?recordId='+submitTask)
      .then(function (data){
        if(data.generateStatus==2){
       //成功
       let task={
              roleId:data.roleId,
              soundUrl:process.env.VUE_APP_URL+data.soundUrl
            }
           taskList.value.push(task);
           submitTask=null;

        }
    

 
       })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
      }else{
        console.log("clearInterval");
        clearInterval(interval);
      }

       
        
      }



</script>
<style scoped>
.container {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  /* 如果需要换行，可以设置为wrap */
}

.content {
  padding-top: 20px;
  /* padding-left: 50px;
  padding-right: 50px; */
  width: 50%;
  height: 100%;
  border-right: 1px solid var(--el-border-color);
}

.info {
  padding: 20px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
}

.user-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-items: flex-start;
}

.user-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--el-border-color);
  border-radius: 2px;
  padding: 10px;


}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;


}

.el-row {
  width: 100%;

}

.user-name {
  font-size: 18px;
  font-weight: bold;
}

.metrics {
  display: flex;
  gap: 16px;
  color: #999;
}

.user-item img {
  width: 120px;
  /* 你可以根据需要调整宽度 */
  height: 100px;
  /* 保持图像的纵横比 */
  border-radius: 10px;
  /* 圆角半径，可以根据需要调整 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影以增强效果 */
}

.el-row {
  margin-bottom: 20px;

}

.task_list {
  width: 30%;
  padding-left: 50px;
  padding-right: 50px;


}

.task_list img {
  width: 80px;
  /* 你可以根据需要调整宽度 */
  height: 80px;
  /* 保持图像的纵横比 */
  border-radius: 10px;
  /* 圆角半径，可以根据需要调整 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影以增强效果 */
}
</style>